<ion-header>
  <ion-navbar>
    <ion-title>
      你问我答
    </ion-title>
  </ion-navbar>
</ion-header>

<!-- 内容 -->
<ion-content class="cards-bg social-cards">
 <!-- top header -->
  <div padding>
    <ion-segment [(ngModel)]="pet">
      <ion-segment-button value="推荐">
        推荐
      </ion-segment-button>
      <ion-segment-button value="热门">
        热门
      </ion-segment-button>
    </ion-segment>
  </div>


  <!-- list-->
  <ion-card>
    <ion-item>
      <ion-avatar item-start>
        <img src="assets/imgs/niwenwoda_people1.png">
      </ion-avatar>
      <h2>axun_dxy</h2>
      <p>November 5, 1955</p>
    </ion-item>

    <img style="height: 255px" src="assets/imgs/wode_image_bg.jpg">

    <ion-card-content>
      <p>这张照片从摄影的角度分析有那些问题</p>
      <p>其他描述。。。。。。。</p>
    </ion-card-content>

    <ion-row>
      <ion-col>
        <button ion-button color="primary" clear small icon-start>
          <ion-icon name='thumbs-up'></ion-icon>
          12 点赞
        </button>
      </ion-col>
      <ion-col>
        <button ion-button color="primary" clear small icon-start>
          <ion-icon name='text'></ion-icon>
          4 留言
        </button>
      </ion-col>
      <ion-col align-self-center text-center>
        <ion-note>
          122 浏览
        </ion-note>
      </ion-col>
    </ion-row>
  </ion-card>


  <ion-card>
    <ion-item>
      <ion-avatar item-start>
        <img src="assets/imgs/niwenwoda_people2.png">
      </ion-avatar>
      <h2>Sarah Connor</h2>
      <p>May 12, 1984</p>
    </ion-item>
    <img style="height: 255px" src="assets/imgs/home_banner_top.png">
    <ion-card-content>
      <p>这张照片从摄影的角度分析有那些问题</p>
      <p>其他描述。。。。。。。</p>
    </ion-card-content>
    <ion-row>
      <ion-col>
        <button ion-button color="primary" clear small icon-start>
          <ion-icon name='thumbs-up'></ion-icon>
          30 点赞
        </button>
      </ion-col>
      <ion-col>
        <button ion-button color="primary" clear small icon-start>
          <ion-icon name='text'></ion-icon>
          64 留言
        </button>
      </ion-col>
      <ion-col align-self-center text-center>
        <ion-note>
          11 浏览
        </ion-note>
      </ion-col>
    </ion-row>

  </ion-card>


  <ion-card>
    <ion-item>
      <ion-avatar item-start>
        <img src="assets/imgs/niwenwoda_people3.png">
      </ion-avatar>
      <h2>Dr. Ian Malcolm</h2>
      <p>June 28, 1990</p>
    </ion-item>
    <img style="height: 255px" src="assets/imgs/wode_image_bg.jpg">
    <ion-card-content>
      <p>这张照片从摄影的角度分析有那些问题</p>
      <p>其他描述。。。。。。。</p>
    </ion-card-content>
    <ion-row>
      <ion-col>
        <button ion-button color="primary" clear small icon-start>
          <ion-icon name='thumbs-up'></ion-icon>
          46 点赞
        </button>
      </ion-col>
      <ion-col>
        <button ion-button color="primary" clear small icon-start>
          <ion-icon name='text'></ion-icon>
          66 留言
        </button>
      </ion-col>
      <ion-col align-self-center text-center>
        <ion-note>
          2222浏览
        </ion-note>
      </ion-col>
    </ion-row>

  </ion-card>


</ion-content>

<style>
  .social-cards ion-col {
    padding: 0;
  }
</style>
